import React, { useEffect, useState } from 'react'
import s from './style.module.less'
import Header from '@/components/Header'
import { get } from '@/utils/index.js'
import { Uploader, Toast, Input, Cell, Button } from 'react-vant';
import axios from 'axios'
import { baseURL } from '@/utils/axios.js'
import {post} from '@/utils/index.js'
import { useNavigate } from 'react-router-dom';

export default function Userinfo() {
    const [user, setUser] = useState({});
    const [defaultAvatar, setDefaultAvatar] = useState([])
    const [signature, setSignature] = useState()
    const navigate=useNavigate()

    useEffect(() => {
        getUserinfo()
    }, [])

    const getUserinfo = async () => {
        const { data } = await get('/api/user/get_userinfo')
        console.log(data);
        setUser(data)
        setDefaultAvatar([{ url: data.avatar }])
    }

    const uploadAvatar = async (files) => {
        console.log(files);
        let formData = new FormData()
        formData.append('file', files[0].file)
        let userToken = localStorage.getItem('userToken')

        axios({
            method: 'post',
            url: `${baseURL}/api/upload`,
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data',
                'Authorization': userToken
            }
        }).then(res => {
            console.log('res=', res);
            setDefaultAvatar(res.data)
        })

    }

    const save=async()=>{
        const {data}=await post('/api/user/edit_userinfo',{
            avatar:defaultAvatar,
            signature: signature
        })
        console.log(data);
        Toast.success('保存成功')
        navigate(-1)
    }
    return (
        <div>
            <Header title="用户信息"></Header>
            <div className={s.userinfo}>
                <h1>个人资料</h1>
                <div className={s.item}>
                    <div className={s.title}>头像</div>
                    <div className={s.avatar}>
                        {/* <img src={user.avatar} alt="" className={s.avatarUrl} /> */}
                        <div className={s.desc}>
                            <Uploader
                                accept='*'
                                defaultValue={defaultAvatar}
                                onOversize={() => Toast.fail('图片不得超过200KB')}
                                maxCount='1'
                                maxSize={20 * 1024}
                                onChange={uploadAvatar}
                            />
                        </div>
                    </div>
                </div>
                <div className={s.item}>
                    <div className={s.title}>个性签名</div>
                    <div className={s.signature}>
                        <Cell>
                            <Input
                                value={signature}
                                onChange={text => setSignature(text)}
                                placeholder='请输入文本'
                            />
                        </Cell>

                    </div>
                </div>
                <Button block type='primary' color='#007fff' onClick={save}>保存</Button>
            </div>
        </div>
    )
}
